<script setup>
import { ref, onMounted, watchEffect, nextTick } from 'vue';
import {
    productPageService, fullProductList, productDTOByIdService,
    logicDeleteByIdService, saveProductService, addProductService
} from '../../api/product';
import { uploadFileService } from '../../api/user';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useTokenStore } from '@/stores/token.js'

const tokenStore = useTokenStore()


// 搜索表单数据
const search = ref({})

// 商品列表
const productList = ref([])

// 品牌列表
const brandList = ref([])

// 分类列表
const categoryList = ref([])

// 编辑表单数据
const editForm = ref([])

// 分类映射表
const categoryMap = ref({});

// 树形规格数据
const treeSpecData = ref([
    {
        id: 'root',
        label: '规格类型',
        children: []
    }
])

const specTitle = ref('')

// 当前编辑的节点
const currentNode = ref(null)

// 规格对话框控制
const specDialogVisible = ref(false)
const specForm = ref({
    name: '',
    type: ''
})

// 默认树形配置
const defaultProps = {
    children: 'children',
    label: 'label'
}

// 将原始规格数据转换为树形结构
const formatToTreeData = (specs) => {
    const result = []
    Object.entries(specs || {}).forEach(([type, values]) => {
        const typeNode = {
            id: `type-${Math.random().toString(36).substr(2, 9)}`,
            label: type,
            parentId: 'root',
            children: []
        }

        if (Array.isArray(values)) {
            typeNode.children = values.map(value => ({
                id: `value-${Math.random().toString(36).substr(2, 9)}`,
                label: value,
                parentId: typeNode.id,
                isLeaf: true
            }))
        }

        result.push(typeNode)
    })
    return result
}

// 将树形结构转换回原始格式
const formatToSpecObject = (treeData) => {
    const result = {}
    treeData.forEach(typeNode => {
        if (typeNode.children && typeNode.children.length > 0) {
            result[typeNode.label] = typeNode.children
                .filter(child => !child.isLeaf || child.label)
                .map(child => child.label)
        }
    })
    return result
}

// 初始化树形数据
watchEffect(() => {
    if (editForm.value?.specs) {
        treeSpecData.value = formatToTreeData(editForm.value.specs)
    }
})

// 添加同级节点（规格类型）
const appendSibling = (node) => {
    console.log('添加同级节点:', node)
    currentNode.value = {
        ...node,
        parentId: 'root'  // 强制指定父节点为root
    }
    specTitle.value = '添加规格类型'
    specForm.value = {
        name: '',
        type: 'type'
    }
    specDialogVisible.value = true
    console.log('对话框状态:', specDialogVisible.value)
}

// 添加子级节点（规格属性）
const appendNode = (node) => {
    console.log('添加子级节点:', node)
    currentNode.value = node
    specTitle.value = '添加规格属性'
    specForm.value = {
        name: '',
        type: 'value'
    }
    specDialogVisible.value = true
    console.log('对话框状态:', specDialogVisible.value)
}

// 删除子节点
const removeNode = (node) => {
    const parent = treeSpecData.value.find(item => item.id === node.parentId)
    if (parent) {
        parent.children = parent.children.filter(item => item.id !== node.id)
    } else {
        treeSpecData.value = treeSpecData.value.filter(item => item.id !== node.id)
    }

    // 更新原始数据
    updateSpecFromTree()
}

// 删除父节点
const removeParentNode = (node) => {
    // 先删除所有子节点
    if (node.children && node.children.length > 0) {
        node.children.forEach(child => {
            removeNode(child)
        })
    }

    // 再删除父节点本身
    const parent = treeSpecData.value.find(item => item.id === node.parentId)
    if (parent) {
        parent.children = parent.children.filter(item => item.id !== node.id)
    } else {
        treeSpecData.value = treeSpecData.value.filter(item => item.id !== node.id)
    }

    // 更新原始数据
    updateSpecFromTree()
}

// 确认添加规格
const confirmSpec = () => {
    console.log('确认添加规格:', specForm.value)
    if (!specForm.value.name.trim()) {
        ElMessage.warning('请输入规格名称')
        return
    }

    // 创建新的树形数据副本
    const newTreeData = JSON.parse(JSON.stringify(treeSpecData.value))

    if (specForm.value.type === 'type') {
        // 添加规格类型
        const root = newTreeData.find(item => item.id === 'root')
        if (root) {
            const newNode = {
                id: generateUniqueId(),
                label: specForm.value.name,
                parentId: 'root',
                children: []
            }
            if (!root.children) root.children = []
            root.children.push(newNode)
        }
    } else {
        // 添加规格属性
        const parentNode = newTreeData.find(item => item.id === currentNode.value?.id)
        if (parentNode) {
            const newNode = {
                id: generateUniqueId(),
                label: specForm.value.name,
                parentId: parentNode.id,
                isLeaf: true
            }
            if (!parentNode.children) parentNode.children = []
            parentNode.children.push(newNode)
        }
    }

    // 更新树形数据
    treeSpecData.value = newTreeData
    specDialogVisible.value = false
    specForm.value.name = ''

    // 强制更新原始数据
    updateSpecFromTree()

    // 调试日志
    nextTick(() => {
        console.log('更新后的树形数据:', JSON.stringify(treeSpecData.value, null, 2))
        console.log('转换后的规格数据:', editForm.value.specs)
    })
}

// 更新原始规格数据
const updateSpecFromTree = () => {
    editForm.value.specs = formatToSpecObject(treeSpecData.value)
}


// CascaderProps
const props = {
    label: 'name', value: 'id', children: 'children',
    expandTrigger: 'hover',
}

// 表单标题
const dialogTitle = ref('');

// 多选
const selectedIds = ref([]);

// 分页
// 当前页码
const currentPage = ref(1);
// 每页数量
const pageSize = ref(10);
// 总数
const total = ref(0);

// 显隐编辑表单
const editFormVisible = ref(false);

// 图片上传的url
const imageUrl = ref('')

onMounted(() => {
    // 初始化数据
    searchAll();
})

// 初始化数据
const searchAll = async () => {
    // 调用商品分页查询接口
    let result = await fullProductList(search.value);

    let data = result.data;
    buildCategoryTree(data.categoryList);
    brandList.value = data.brandVOList;

    total.value = parseInt(data.productVOPage.total);
    productList.value = data.productVOPage.list;
}

// 构建树形分类数据映射表
const buildCategoryTree = (data, parentId = '0', level = 0) => {
    const map = {};
    const build = (items, currentParentId, currentLevel = 0) => {
        return items
            .filter(item => String(item.parentId) === String(currentParentId)) // 统一类型
            .map(item => {
                const node = {
                    ...item,
                    label: item.name,
                    value: item.id,
                    level: currentLevel,
                    children: build(items, item.id, currentLevel + 1) // 使用当前节点 id 作为下一层 parentId
                };
                map[node.id] = node;
                return node;
            });
    };
    categoryList.value = build(data, parentId, level);
    categoryMap.value = map;
};

// 根据 categoryId 获取全路径名称
const getCategoryPath = (categoryId) => {
    const path = [];
    let currentId = String(categoryId);

    if (currentId && currentId !== '0' && categoryMap.value[currentId]) {
        const node = categoryMap.value[currentId];
        path.unshift(node.name);
    }

    return path[0];
};

const getBrandName = (brandId) => {
    if (!brandId || brandId === '0') return '无品牌'

    // 强制类型转换确保匹配
    const targetId = brandId.toString()
    const brand = brandList.value?.find(item => item.id.toString() === targetId)

    return brand?.brandName || '未知品牌'
}

// 图片上传
const uploadImage = async (file) => {
    const result = await uploadFileService(file)
    imageUrl.value = result.data.data;
};

// 图片上传前处理
const beforeAvatarUpload = (rawFile) => {
    const isValidType = ['image/jpeg', 'image/png', 'image/webp'].includes(rawFile.type);
    if (!isValidType) {
        ElMessage.error('仅支持 JPG/PNG/WEBP 格式');
        return false;
    }

    const isValidSize = rawFile.size / 1024 / 1024 <= 10;
    if (!isValidSize) {
        ElMessage.error('图片大小不能超过 10MB');
        return false;
    }

    return true;
}

// 查询表格数据
const searchPage = async () => {
    // 如果选择了级联分类，取最后一级分类 ID
    const categoryId = Array.isArray(search.value.productCategoryId)
        ? search.value.productCategoryId[search.value.productCategoryId.length - 1]
        : search.value.productCategoryId;

    // 构造请求参数
    const params = {
        ...search.value,
        productCategoryId: categoryId
    };

    let result = await productPageService(params);
    if (result.code === 200) {
        productList.value = result.data.list;
        total.value = parseInt(result.data.total);
    }
}

// 清空搜索选择
const clearSearch = () => {
    currentPage.value = 1;
    search.value.pageNum = 1;
    pageSize.value = 10;
    search.value.pageSize = 10;
    search.value = {};
    searchPage();
}

// 获取选择列表
const handleSelectionChange = (selection) => {
    selectedIds.value = selection.map(item => item.id);
};

// 编辑
const editById = async (id) => {
    dialogTitle.value = "编辑商品";
    const result = await productDTOByIdService(id);

    // 确保规格数据格式正确
    editForm.value = {
        ...result.data,
        specs: result.data.specs || {}
    };

    // 初始化图片URL
    imageUrl.value = editForm.value.image || '';

    // 初始化树形数据
    treeSpecData.value = formatToTreeData(editForm.value.specs);
    console.log("编辑表单数据:", editForm.value);

    editFormVisible.value = true;
}

// 添加
const addProduct = () => {
    // 初始化表单
    editForm.value = {
        createDate: new Date(),
        updateDate: new Date(),
        specs: {}
    };

    // 初始化树形数据
    treeSpecData.value = formatToTreeData({});
    dialogTitle.value = '添加商品';
    editFormVisible.value = true;
    console.log("添加表单初始化完成");
};

// 删除
const deleteById = (id) => {
    // 删除
    ElMessageBox.confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        // 确定删除
        await logicDeleteByIdService(id);
        ElMessage.success('删除成功!');
        searchPage();
    }).catch(() => {
        // 取消删除
        ElMessage.info('已取消删除');
    })
}

// 批量删除
const batchDelete = () => {
    ElMessageBox.confirm(
        `确认删除 ${selectedIds.value.length} 个商品？`,
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
            // 反复调用删除接口
            for (let i = 0; i < selectedIds.value.length; i++) {
                await logicDeleteByIdService(selectedIds.value[i])
            }
            ElMessage.success('批量删除成功!');
            selectedIds.value = [];
            searchPage();
        }).catch(() => {
            ElMessage.info('已取消删除');
        });
};

// 保存
const saveEdit = async () => {
    // 如果是数组，取最后一项作为最终分类 ID
    if (Array.isArray(editForm.value.categoryId)) {
        editForm.value.categoryId = editForm.value.categoryId[editForm.value.categoryId.length - 1];
    }


    if (editForm.value.id) {
        await saveProductService(editForm.value);
        console.log(editForm.value);

        ElMessage.success('保存成功!');
    } else {
        await addProductService(editForm.value)
        ElMessage.success('添加成功!');
    }

    editFormVisible.value = false;
    searchPage();
}

// 每页展示记录数变化
const handleSizeChange = (val) => {
    // 同步更新 pageSize
    pageSize.value = val;
    // 同步更新搜索参数
    search.value.pageSize = val;
    console.log(`每页 ${val} 条`);
    searchPage();
}
// 页码变化时触发
const handleCurrentChange = (val) => {
    // 同步更新 currentPage
    currentPage.value = val;
    // 同步更新搜索参数
    search.value.pageNum = val;
    console.log(`当前页: ${val}`);
    searchPage();
}

// 价格校验方法
const filterNumberInput = (field) => {
    const value = search.value[field];
    // 移除非数字字符，保留数字和小数点
    const filteredValue = value.replace(/[^0-9.]/g, '');

    // 防止连续小数点和负数
    if (filteredValue === '' || isNaN(filteredValue)) {
        search.value[field] = '';
        return;
    }

    // 限制只能输入一个小数点
    const parts = filteredValue.split('.');
    if (parts.length > 2) {
        search.value[field] = parts[0] + '.' + parts.slice(1).join('');
        return;
    }

    // 自动保留两位小数（可选）
    if (parts[1]?.length > 2) {
        search.value[field] = parseFloat(filteredValue).toFixed(2);
        return;
    }

    // 更新值
    search.value[field] = filteredValue;
}

// 添加handleAvatarSuccess方法
const handleAvatarSuccess = (response) => {
    imageUrl.value = response.data;
    // 同步更新表单数据
    if (editForm.value) {
        editForm.value.image = response.data;
    }
}
</script>

<template>
    <div class="product-list-vue">
        <!-- 搜索栏 -->
        <div class="search-container" height="7vh">
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <div class="search-item-1">
                    <el-form-item label="商品名称">
                        <el-input v-model="search.keyword" placeholder="待输入" clearable />
                    </el-form-item>
                    <el-form-item label="产品序列号">
                        <el-input v-model="search.productSn" placeholder="待输入" clearable />
                    </el-form-item>
                    <el-form-item label="上架状态">
                        <el-select v-model="search.publishStatus" placeholder="上架状态" clearable>
                            <el-option label="待上架" value="0" />
                            <el-option label="已上架" value="1" />
                            <el-option label="已下架" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核状态">
                        <el-select v-model="search.verifyStatus" placeholder="审核状态" clearable>
                            <el-option label="审核中" value="0" />
                            <el-option label="审核通过" value="1" />
                            <el-option label="审核未通过" value="2" />
                        </el-select>
                    </el-form-item>
                </div>
                <div class="search-item-2">
                    <el-form-item>
                        <el-button type="success" @click="addProduct">添加商品</el-button>
                    </el-form-item>
                    <el-form-item label="品牌" prop="brandId">
                        <el-select v-model="search.brandId" placeholder="选择品牌" clearable>
                            <el-option v-for="item in brandList" :key="item.id" :label="item.brandName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类" prop="productCategoryId">
                        <el-cascader v-model="search.productCategoryId" :options="categoryList" :props="props"
                            placeholder="请选择分类" clearable style="width: 100%" />
                    </el-form-item>
                    <el-form-item label="价格区间">
                        <el-input v-model="search.minPrice" type="number" placeholder="最小价格"
                            @input="filterNumberInput('minPrice')" class="search-mini-item" />
                        <span style="margin: 0 1vh 0 1vh;">~</span>
                        <el-input v-model="search.maxPrice" type="number" placeholder="最大价格"
                            @input="filterNumberInput('maxPrice')" class="search-mini-item" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" :disabled="selectedIds.length === 0"
                            @click="batchDelete">批量删除</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" @click="clearSearch">清空</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchPage">查询</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>

        <!-- 表格 -->
        <el-table :data="productList" @selection-change="handleSelectionChange" style="width: 100%">
            <el-table-column align="center" type="selection" :selectable="selectable" width="55" />
            <el-table-column align="center" prop="name" label="商品名称" width="150" />
            <el-table-column align="center" prop="categoryId" label="商品分类" width="100">
                <template #default="scope">
                    <span>{{ getCategoryPath(scope.row.categoryId) || "未知分类" }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="price" label="价格 (元)" width="100" />
            <el-table-column align="center" prop="stock" label="库仔数量" width="100" />
            <el-table-column align="center" prop="image" label="商品图片" width="100">
                <template #default="scope">
                    <img :src="scope.row.image" width="50" height="50" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="brandId" label="品牌" width="150">
                <template #default="scope">
                    <!-- 品牌名称映射 -->
                    <span>
                        {{ getBrandName(scope.row.brandId) }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="sold" label="销量" width="100" />
            <el-table-column align="center" prop="commentCount" label="评论数量" width="100" />
            <el-table-column align="center" prop="isAD" label="广告" width="80">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.isAD">是</el-tag>
                    <el-tag type="info" v-else>否</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="publishStatus" label="商品状态" width="110">
                <template #default="scope">
                    <el-tag type="infosuccess" v-if="scope.row.publishStatus == 0">待上架</el-tag>
                    <el-tag type="success" v-else-if="scope.row.publishStatus == 1">已上架</el-tag>
                    <el-tag type="danger" v-else>已下架</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="editById(scope.row.id)"><el-icon>
                            <EditPen />
                        </el-icon> </el-button>
                    <el-button type="danger" size="small" @click="deleteById(scope.row.id)"><el-icon>
                            <Delete />
                        </el-icon> </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="demo-pagination-block">
            <div class="demonstration"></div>
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[5, 10, 25, 50, 75, 100, 150, 200]" size="default" :background="true"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>

        <!-- 编辑表单 -->
        <el-dialog v-model="editFormVisible" :title="dialogTitle" width="50%">
            <el-form :model="editForm" label-width="120px">
                <!-- 基本信息区 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="商品图片">
                            <span class="el-icon-upload">
                                <el-upload class="avatar-uploader" action="/api/users/upload" name="file" :headers="{
                                    Authorization: tokenStore.token,
                                }" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </span>

                        </el-form-item>
                    </el-col>

                    <el-col :span="16">
                        <el-form-item label="商品名称" prop="name">
                            <el-input v-model="editForm.name" />
                        </el-form-item>
                        <el-form-item label="分类" prop="categoryId">
                            <el-cascader v-model="editForm.categoryId" :options="categoryList"
                                :props="{ label: 'name', value: 'id', children: 'children' }" placeholder="请选择分类"
                                style="width: 100%" clearable />
                        </el-form-item>
                        <el-form-item label="品牌" prop="brandId">
                            <el-select v-model="editForm.brandId" placeholder="请选择品牌" style="width: 100%">
                                <el-option v-for="item in brandList" :key="item.id" :label="item.brandName"
                                    :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 价格库存区 -->
                <el-divider content-position="left">价格与库存</el-divider>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="价格" prop="price">
                            <el-input v-model.number="editForm.price" type="number" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="库存" prop="stock">
                            <el-input v-model.number="editForm.stock" type="number" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 规格说明区 -->
                <el-divider content-position="left">规格说明</el-divider>
                <el-form-item>
                    <div class="spec-tree-container">
                        <el-tree :data="treeSpecData" node-key="id" :props="defaultProps">
                            <template #default="{ node, data }">
                                <span class="custom-tree-node">
                                    <span>{{ node.label }}</span>
                                    <span class="tree-node-actions">
                                        <template v-if="!data.isLeaf">
                                            <el-button type="text" icon="CirclePlus" @click.stop="appendSibling(data)"
                                                class="action-button add-parent-btn" />
                                            <el-button type="text" icon="Delete" @click.stop="removeParentNode(data)"
                                                class="action-button delete-parent-btn" />
                                        </template>
                                        <template v-else>
                                            <el-button type="text" icon="CirclePlus" @click.stop="appendNode(data)"
                                                class="action-button add-child-btn" />
                                            <el-button type="text" icon="Delete" @click.stop="removeNode(data)"
                                                class="action-button delete-child-btn" />
                                        </template>
                                    </span>
                                </span>
                            </template>
                        </el-tree>
                    </div>
                </el-form-item>

                <!-- 状态信息区 -->
                <el-divider content-position="left">状态信息</el-divider>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="上架状态" prop="publishStatus">
                            <el-select v-model="editForm.publishStatus" placeholder="请选择状态" style="width: 100%">
                                <el-option label="待上架" :value="0" />
                                <el-option label="已上架" :value="1" />
                                <el-option label="已下架" :value="2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="审核状态" prop="verifyStatus">
                            <el-select v-model="editForm.verifyStatus" placeholder="请选择状态" style="width: 100%">
                                <el-option label="审核中" :value="0" />
                                <el-option label="审核通过" :value="1" />
                                <el-option label="审核未通过" :value="2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 其他信息区 -->
                <el-divider content-position="left">其他信息</el-divider>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="产品序列号" prop="productSn">
                            <el-input v-model="editForm.productSn" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否广告" prop="isAD">
                            <el-switch v-model="editForm.isAD" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="销量">
                            <el-input v-model.number="editForm.sold" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="评论数量">
                            <el-input v-model.number="editForm.commentCount" readonly />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click="saveEdit">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>
.product-list-vue {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1350px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

.demo-form-inline .el-input:not(.search-mini-item) {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.search-mini-item {
    --el-input-width: 100px;
    margin: 0;
}

/* 表单区域单独居中 */
.search-container {
    width: 100%;
    text-align: center;
}

.search-container .el-form-item {
    /* 调整右侧间距 */
    margin-right: 20px;
}

/* 减小 label 和 input 之间的间距 */
.search-container .el-form-item__content {
    /* 根据需要调整间距 */
    margin-left: 5px !important;
}

/* 调整最大价格输入框与按键的间距 */
.price-range-item {
    margin-right: 100px !important;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

/* 树形容器高度限制 */
.spec-tree-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 10px;
    background-color: #f9f9f9;
    position: relative;
}

/* 滚动条样式优化 */
.spec-tree-container::-webkit-scrollbar {
    width: 6px;
}

.spec-tree-container::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(144, 147, 153, 0.3);
}



/* 树形节点样式 */
.custom-tree-node {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 8px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
}



/* 操作按钮容器 */
.tree-node-actions {
    display: flex;
    align-items: center;
}

/* 删除按钮样式 */
.tree-node-actions .delete-btn {
    color: #F56C6C;
    display: none;
}

.el-tree-node__content:hover .tree-node-actions .delete-btn {
    display: inline-block;
}

/* 节点悬停效果 */
.el-tree-node__content:hover {
    background-color: #f5f7fa;
    border-radius: 4px;
}


.el-icon-upload {
    margin: 20% 0 0 20%;
}

/* 头像上传样式 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader .avatar {
    width: 120px;
    height: 120px;
    display: block;
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
}
</style>
